<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="referrer" content="no-referrer"/>
    <link rel="icon" th:href="@{/images/logo.png}" type="image/x-icon"/>
    <title>帖子详情</title>
    <!-- jquery -->
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" th:href="@{/css/editormd.preview.css}"/>

    <style>

        .row {
            margin-top: -40px
        }

        .icon:hover {
            cursor: pointer;
            color: #499ef3;
        }

        .container-fluid {
            padding-top: 36px;
            margin-top: 37px;
            margin-left: 22px;
            margin-right: 22px;
            padding-bottom: 10px;
            background-color: white;
            margin-bottom: 37px;
            margin-top: 1px;
        }

        body {
            background-color: #F7F6F7;
        }

    </style>

</head>
<body>

<!--导航栏-->
<div th:replace="common/common::navigation"></div>

<!--主体-->
<div class="container-fluid">
    <div class="row">
        <!-- 左边----帖子详情 -->
        <div class="col-xs-12 col-lg-9 col-md-12">
            <h3 style="margin-bottom: 8px;">
                <span th:text="${postDTO.getPost().title}"></span>
                <div style="float: right">
                    <a th:if="${loginUser != null && loginUser.type == 1}" style="margin-right: 6px;"
                       class="label label-danger" th:onclick="setTopOrWonderful([[${postDTO.getPost().postId}]], '/post/setTop')"
                       th:text="${postDTO.getPost().type == 2 ? '取消置顶' : '置顶'}">
                        置顶
                    </a>

                    <a th:if="${loginUser != null && loginUser.type == 1}" style="margin-right: 6px;"
                       class="label label-danger" th:onclick="setTopOrWonderful([[${postDTO.getPost().postId}]], '/post/setWonderful')"
                       th:text="${postDTO.getPost().type == 1 ? '取消加精' : '加精'}">
                        加精
                    </a>
                    <a th:if="${loginUser != null && (loginUser.userId == postDTO.getUser().getUserId || loginUser.type == 1)}"
                       class="label label-danger" th:onclick="deletePost([[${postDTO.getPost().postId}]])">
                        删除
                    </a>
                </div>

            </h3>

            <div style="color: #999; margin-top: 13px;">
                <span>作者：<span th:text="${postDTO.getUser().nickName}"></span></span>&nbsp;|
                <span>发布时间：</span>
                <span th:text="${#dates.format(postDTO.getPost().createTime, 'yyyy-MM-dd HH:mm:ss')}">发布时间</span>&nbsp;|&nbsp;阅读数：
                <span th:text="${postDTO.getPost().viewCount}">0</span>
                <div style="float: right">
                    <span class="glyphicon glyphicon-thumbs-up icon"
                          th:onclick="doOrUndoLikePost([[${postDTO.getPost().postId}]], [[${postDTO.likeStatus}]])"></span>
                    <span th:text="${postDTO.getPost().likeCount}">11</span>
                    <span></span>个点赞&nbsp;·&nbsp;
                    <span class="glyphicon glyphicon-comment icon"></span>
                    <span th:text="${postDTO.getPost().commentCount}">54</span>个评论
                </div>

            </div>
            <hr>

            <div id="test-markdown-view">
                <textarea style="display:none;" th:text="${postDTO.getPost().content}">### Hello world!</textarea>
            </div>
            <hr>
            <!--            <div th:if="${post.tag != null}" style="margin-top: -14px;margin-bottom: -10px;">-->
            <!--                <span th:each="tag: ${post.tag.split(',')}">-->
            <!--                    <span class="label label-info" th:text="${tag}">Info</span>-->
            <!--                </span>-->
            <!--            </div>-->

            <hr>
            <h3><span th:text="${postDTO.getPost().commentCount}">1</span>个回复</h3>
            <hr>

            <ul class="media-list">
                <li class="media" th:each="commentDTO:${comments.getCommentDTOList()}">
                    <div class="media-left">
                        <a th:href="@{|/profile/myself/${commentDTO.getUser().id}|}">
                            <img th:src="${commentDTO.getUser().avatar}" alt="..." class="img-circle" style="width: 45px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading" th:text="${commentDTO.getUser().nickName}" style="color: #999;font-size: 15px;">
                            作者名字</h5>

                        <div th:text="${commentDTO.getComment().content}" style="margin-top: 8px;font-size: 16px;">
                            klsajdklsajdalksjdlksajdklasjdklsajdddddddddddddddddddddddddkdl
                        </div>
                        <div style="margin-top: 13px;">
                            <div style="float: left; color: #999">
                                <!--<span class="glyphicon glyphicon-comment icon"></span>
                                <span>0</span>个回复-->
                                <span class="glyphicon glyphicon-thumbs-up icon"
                                      th:onclick="doOrUndoLikeComment([[${commentDTO.getComment().commentId}]], [[${commentDTO.likeStatus}]])"></span>
                                <span th:text="${commentDTO.getComment().likeCount}">54</span>个点赞
                            </div>
                            <div style="float: right; color: #999">
                                <span th:text="${#dates.format(commentDTO.getComment().createTime, 'yyyy-MM-dd')}">2021-04-20</span>&nbsp;·&nbsp;
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-lg-14 col-md-12" style="margin-top: -11px; margin-bottom: -16px;">
                        <hr>
                    </div>
                </li>

            </ul>

            <div th:replace="common/common::pagination"></div>
            <div style="margin-top: 40px;">
                <h3>发表回复</h3>
                <textarea class="form-control" id="reply" rows="8" name="content" th:value="${content}" cols="5"
                          placeholder="请输入回复...."></textarea>
                <button type="button" class="btn btn-success" style="float: right;margin-top: 8px;margin-bottom: 27px;"
                        th:onclick="reply([[${postDTO.getPost().getPostId}]])">发布
                </button>
            </div>
        </div>

        <!--右边 作者 相关帖子-->
        <div class="col-xs-12 col-lg-3 col-md-12">
            <h3>发起人</h3>
            <hr>
            <a th:href="@{|/profile/myself/${postDTO.getUser().id}|}">
                <img th:src="${postDTO.getUser().avatar}" alt="..." class="img-circle" style="width: 46px;">
                ·&nbsp;<span style="font-size: 18px;" th:text="${postDTO.getUser().nickName}">李志军</span>
            </a>
            <hr>
            <div>
                <h4 style="margin-bottom: 17px;">相关帖子</h4>
                <h4 th:each="post: ${relatedPosts}">
                    <li style="font-size: 17px;">
                        <a th:href="@{|/post/detail/${post.id}|}" th:text="${post.title}"></a>
                    </li>
                </h4>

                <hr style="margin-top: -7px;">

                <h4 style="margin-bottom: 17px;">实时热帖</h4>
                <hr style="margin-top: -7px;margin-bottom: 2px;">
                <h4 th:each="post: ${hourHotPostRank}">
                    <li style="font-size: 17px;">
                        <a th:href="@{|/post/detail/${post.postId}|}" th:text="${post.title}"></a>
                    </li>
                </h4>
            </div>
        </div>
    </div>
</div>


</body>
<script th:src="@{/js/editormd.js}"></script>
<script th:src="@{/lib/marked.min.js}"></script>
<script th:src="@{/lib/prettify.min.js}"></script>
<script th:src="@{/common/common.js}"></script>
<script type="text/javascript">
    $(function () {
        var testView = editormd.markdownToHTML("test-markdown-view", {
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
</script>
<script>

    function doOrUndoLikeComment(commentId, likeStatus) {
        uri = ""
        if (likeStatus) {
            uri = "/undoLikeComment"
        } else {
            uri = "/doLikeComment"
        }
        $.post(
            CONTEXT_PATH + uri,
            {
                "commentId": commentId
            },
            function (data) {
                if (data.code === 1) {
                    alert(data.msg);
                } else {
                    window.location.reload();
                }

            }
        )
    }

    function doOrUndoLikePost(postId, likeStatus) {
        uri = ""
        if (likeStatus) {
            uri = "/undoLikePost"
        } else {
            uri = "/doLikePost"
        }
        $.post(
            CONTEXT_PATH + uri,
            {
                "postId": postId
            },
            function (data) {
                if (data.code === 1) {
                    alert(data.msg);
                } else {
                    window.location.reload();
                }
            }
        )
    }

    function reply(postId) {
        var content = $("#reply").val();
        $.post(
            CONTEXT_PATH + "/post/reply",
            {
                "content": content,
                "postId": postId
            },
            function (data) {
                if (data.code === 1) {
                    alert(data.msg);
                } else {
                    window.location.reload();
                }
            }
        )
    }

    function deletePost(postId) {
        $.post(
            CONTEXT_PATH + "/post/delete/",
            {
                "postId": postId
            },
            function (data) {
                if (data.code === 0) {
                    alert("删除成功!");
                    location.href = CONTEXT_PATH;
                } else {
                    alert("删除失败");
                }

            }
        )
    }

    function setTopOrWonderful(postId, uri) {
        $.post(
            CONTEXT_PATH + uri,
            {
                "postId": postId
            },
            function (data) {
                if (data.code === 1) {
                    alert(data.msg);
                } else {
                    location.reload();
                }
            }
        )
    }
</script>
</html>

